<template>
  <el-dialog
    :title="`确认${type==1?'付款':'收款'}`"
    :visible.sync="dialogFormVisible"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form ref="paymentForm" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12" v-if="opType==1">
          <el-form-item label="账单时间" prop="payableTime">
<!--            <el-input-->
<!--              v-model="form.payableTime"-->
<!--              class="el-input-style"-->
<!--              style="width: 100%"-->
<!--              disabled-->
<!--            />-->
            {{form.payableTime}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="`${opType==2?'总金额':'账单金额'}`" prop="payableAmount" style="font-size: 16px">
<!--            <el-input-->
<!--              v-model="form.payableAmount"-->
<!--              class="el-input-style"-->
<!--              style="width: 100%"-->
<!--              disabled-->
<!--            />-->

            ¥{{form.payableAmount}}元<template v-if="form.paid>0">/<span style="color: red;font-size: 14px">已付¥{{form.paid}}元</span></template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="`${type==1?'支付':'收款'}方式`" prop="payWay">
            <el-select
              v-model="form.payWay"
              style="width: 100%"
              :placeholder="`请选择${type == 1? '支付' : '收款'}方式`"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in payWays"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="`${type==1?'支付':'收款'}时间`" prop="payTime">
            <el-date-picker
              clearable
              size="small"
              style="width: 100%"
              v-model="form.payTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              :placeholder="`选择${type==1?'支付':'收款'}时间`"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="`${type==1?'支付':'收款'}金额`" prop="payAmount">
            <el-input
              v-model="form.payAmount"
              :placeholder="`请输入${type==1?'支付':'收款'}金额`"
              maxlength="10"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="`${type==1?'支付':'收款'}凭证`">
            <ImageUpload isArray v-model="form.urlList"  :limit="6" :zoom="0.6"></ImageUpload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-loading="submitLoading" type="primary" @click="submitForm" :loading="submitLoading"
      >确 定
      </el-button
      >
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {confimPayment, updateBill} from "@/api/bills/escrow"
export default {
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      type : 1,//1.确认付款 3.确认收款
      opType:1, //1.单个收付款 2批量收付款
      payWays:[
        {label:'微信',value:1},
        {label:'支付宝',value:2},
        {label:'信用卡',value:3},
        {label:'现金',value:4},
      ],
      dialogFormVisible:false,
      submitLoading:false,
      form:{
        ids:[],
        payableTime:'',//账单时间
        payableAmount:'',//金额
        payWay:'',//支付方式
        payTime:'',//支付时间
        payAmount:'',//支付金额
        urlList:null,//支付凭证
        remark:'',//备注
      },
      rules:{
        payWay: [
          {required: true, message: '请选择支付方式', trigger: 'change'}
        ],
        payTime: [
          {required: true, message: '请选择支付时间', trigger: 'change'}
        ],
        payAmount: [
          {required: true, message: '请输入支付费用', trigger: 'change'},
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: '请输入合法的金额数字，最多两位小数',
            trigger: 'change',
          },
        ],
      },
      bills:[],
    }
  },
  // 计算属性 类似于 data 概念
  computed: {
  },
  // 方法集合
  methods: {
    show(type, opType, bills){
      this.dialogFormVisible = true;
      this.form.urlList = null;
      this.type = type;
      this.opType = opType;
      this.bills = bills;
      this.$nextTick(()=>{
        this.$refs.paymentForm.resetFields();
        if (this.opType == 1){
          this.form.payableTime = bills[0].billingTime;
        }
        let total = 0
        let paid = 0
        this.form.ids = this.bills.map((item)=>{
          total += Number(item.custodyFees)
          paid += Number(item.payAmount)
          return item.id;
        })
        this.form.payableAmount = total;
        this.form.paid = paid;
      })
    },
    close(){
      this.dialogFormVisible = false;
    },
    // 删除图片
    costImageRemove(file) {
      this.form.urlList = null
    },
    // 上传成功回调
    costImageSuccess(res) {
      this.form.urlList = res.fileName
      this.$refs['form'].validateField('urlList')
    },
    submitForm(){
      this.submitLoading = true
      this.$refs.paymentForm.validate((valid) => {
        if (valid) {
          confimPayment(this.form).then(res=>{
            this.$message({
              type: 'success',
              message: '收款成功'
            });
            this.submitLoading = false
            this.$emit('success')
            this.close()
          })
        }
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },

}
</script>

<style lang="scss" scoped>
</style>
